<template>
  <div ref="flowContainer" class="production-flow-2d"></div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'ProductionFlow2D',
  setup() {
    const flowContainer = ref(null)
    let chart = null

    const initChart = () => {
      if (!flowContainer.value) return
      
      chart = echarts.init(flowContainer.value)
      
      const option = {
        backgroundColor: 'transparent',
        animation: true,
        animationDuration: 2000,
        animationEasing: 'cubicOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: [100, 50],
            roam: false,
            label: {
              show: true,
              position: 'inside',
              fontSize: 11,
              fontWeight: 'bold',
              color: '#ffffff',
              formatter: '{b}'
            },
            itemStyle: {
              borderColor: '#00f2f1',
              borderWidth: 2,
              shadowBlur: 8,
              shadowColor: 'rgba(0,242,241,0.3)'
            },
            lineStyle: {
              color: '#4c9bfd',
              width: 2,
              curveness: 0.1,
              shadowBlur: 5,
              shadowColor: 'rgba(76,155,253,0.4)'
            },
            emphasis: {
              focus: 'adjacency',
              itemStyle: {
                shadowBlur: 15,
                shadowColor: 'rgba(0,242,241,0.6)'
              },
              lineStyle: {
                width: 3,
                shadowBlur: 10
              }
            },
            data: [
              // 第一行：生产要素
              {
                name: '生产要素',
                x: 80,
                y: 80,
                symbol: 'roundRect',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#4c9bfd' },
                    { offset: 1, color: '#1e7f86' }
                  ])
                }
              },
              // 第二行：生产方案相关
              {
                name: '生产方案制定',
                x: 200,
                y: 80,
                symbol: 'roundRect',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#9fe6b8' },
                    { offset: 1, color: '#4c9bfd' }
                  ])
                }
              },
              {
                name: '生产方案',
                x: 320,
                y: 80,
                symbol: 'roundRect',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#9fe6b8' },
                    { offset: 1, color: '#4c9bfd' }
                  ])
                }
              },
              // 第三行：执行生产相关
              {
                name: '执行生产',
                x: 440,
                y: 80,
                symbol: 'roundRect',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#00f2f1' },
                    { offset: 1, color: '#9fe6b8' }
                  ])
                }
              },
              {
                name: '生产结束',
                x: 560,
                y: 80,
                symbol: 'roundRect',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#ed3f35' },
                    { offset: 1, color: '#00f2f1' }
                  ])
                }
              },
              // 中间详细流程
              {
                name: '原料投入',
                x: 140,
                y: 160,
                symbolSize: [80, 40],
                symbol: 'roundRect',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#4c9bfd' },
                    { offset: 1, color: '#006cff' }
                  ])
                }
              },
              {
                name: '加热熔炼',
                x: 260,
                y: 160,
                symbolSize: [80, 40],
                symbol: 'roundRect',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#ed3f35' },
                    { offset: 1, color: '#ff6b35' }
                  ])
                }
              },
              {
                name: '温度控制',
                x: 380,
                y: 160,
                symbolSize: [80, 40],
                symbol: 'roundRect',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#ff9500' },
                    { offset: 1, color: '#ed3f35' }
                  ])
                }
              },
              {
                name: '成品输出',
                x: 500,
                y: 160,
                symbolSize: [80, 40],
                symbol: 'roundRect',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#9fe6b8' },
                    { offset: 1, color: '#00f2f1' }
                  ])
                }
              }
            ],
            links: [
              // 主流程连接
              {
                source: '生产要素',
                target: '生产方案制定',
                symbol: ['none', 'arrow'],
                symbolSize: [0, 12]
              },
              {
                source: '生产方案制定',
                target: '生产方案',
                symbol: ['none', 'arrow'],
                symbolSize: [0, 12]
              },
              {
                source: '生产方案',
                target: '执行生产',
                symbol: ['none', 'arrow'],
                symbolSize: [0, 12]
              },
              {
                source: '执行生产',
                target: '生产结束',
                symbol: ['none', 'arrow'],
                symbolSize: [0, 12]
              },
              // 详细流程连接
              {
                source: '生产要素',
                target: '原料投入',
                symbol: ['none', 'arrow'],
                symbolSize: [0, 10],
                lineStyle: {
                  color: '#9fe6b8',
                  width: 1.5,
                  type: 'dashed'
                }
              },
              {
                source: '原料投入',
                target: '加热熔炼',
                symbol: ['none', 'arrow'],
                symbolSize: [0, 10]
              },
              {
                source: '加热熔炼',
                target: '温度控制',
                symbol: ['none', 'arrow'],
                symbolSize: [0, 10]
              },
              {
                source: '温度控制',
                target: '成品输出',
                symbol: ['none', 'arrow'],
                symbolSize: [0, 10]
              },
              {
                source: '成品输出',
                target: '生产结束',
                symbol: ['none', 'arrow'],
                symbolSize: [0, 10],
                lineStyle: {
                  color: '#9fe6b8',
                  width: 1.5,
                  type: 'dashed'
                }
              }
            ]
          }
        ]
      }

      chart.setOption(option)

      // 添加流动动画效果
      let animationIndex = 0
      const animateFlow = () => {
        const links = option.series[0].links
        links.forEach((link, index) => {
          const delay = index * 600
          setTimeout(() => {
            // 创建流动粒子效果
            const flowOption = {
              series: [{
                ...option.series[0],
                links: links.map((l, i) => ({
                  ...l,
                  lineStyle: {
                    ...l.lineStyle,
                    opacity: i === index ? 1 : 0.6,
                    width: i === index ? (l.lineStyle?.width || 2) + 1 : (l.lineStyle?.width || 2)
                  }
                }))
              }]
            }
            chart.setOption(flowOption)
          }, delay)
        })
      }

      // 每4秒执行一次流动动画
      const flowInterval = setInterval(animateFlow, 4000)
      chart.__flowInterval = flowInterval

      // 响应式处理
      const handleResize = () => {
        chart && chart.resize()
      }
      window.addEventListener('resize', handleResize)
      chart.__handleResize = handleResize
    }

    onMounted(() => {
      setTimeout(initChart, 100)
    })

    onBeforeUnmount(() => {
      if (chart) {
        if (chart.__flowInterval) {
          clearInterval(chart.__flowInterval)
        }
        if (chart.__handleResize) {
          window.removeEventListener('resize', chart.__handleResize)
        }
        chart.dispose()
        chart = null
      }
    })

    return {
      flowContainer
    }
  }
}
</script>

<style scoped>
.production-flow-2d {
  width: 100%;
  height: 100%;
  min-height: 200px;
}
</style>